<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 公共样式 */
        .btn {
            display: inline-block;
            margin: 10px;
            padding: 10px 20px;
            background-color: #e1e1e1;
            color: #000;
            cursor: pointer;
            transition: 500ms;
            overflow: hidden;
            position: relative;
        }
        .btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2098d1;
            z-index: -1;
            transition: 500ms;
        }

        /* 按钮1 fade */
        .fade:hover {
            background-color: #2098d1;
            color: #fff;
        }

        /* 按钮2 sweep-to-right */
        .sweep-to-right::after {
            /* transform: scaleX(0);
            transform-origin: left; */
            transform: translateX(-100%);
            transition: 500ms;
        }
        .sweep-to-right:hover {
            color: #fff;
            background-color: transparent;
        }
        .sweep-to-right:hover::after {
            /* transform: scaleX(1); */
            transform: translateX(0%);
        }

        /* 按钮3 sweep-to-left */
        .sweep-to-left::after {
            transform: translateX(100%);
            transition: 500ms;
        }
        .sweep-to-left:hover {
            color: #fff;
            background-color: transparent;
        }
        .sweep-to-left:hover::after {
            transform: translateX(0%);
        }


        /* 按钮4 sweep-to-bottom */
        .sweep-to-bottom::after {
            transform: translateY(-100%);
            transition: 300ms;
        }
        .sweep-to-bottom:hover {
            color: #fff;
            background-color: transparent;
        }
        .sweep-to-bottom:hover::after {
            transform: translateY(0%);
        }

        /* 按钮5 sweep-to-top */
        .sweep-to-top::after {
            transform: translateY(100%);
            transition: 300ms;
        }
        .sweep-to-top:hover {
            color: #fff;
            background-color: transparent;
        }
        .sweep-to-top:hover::after {
            transform: translateY(0%);
        }

        /* 按钮6 radial-out */
        /* .radial-out {
            background-color: transparent;
        } */
        .radial-out::after {
            border-radius: 50%;
            transform: scale(0);
            transition: 500ms;
        }
        .radial-out:hover {
            color: #fff;
            background-color: transparent;
        }
        .radial-out:hover::after{
            transform: scale(2);
        }

        /* 按钮7 */
        /* .radial-in {
            background-color: #2098d1;
        } */
        .radial-in::after {
            border-radius: 50%;
            transform: scale(2);
            background-color: #e1e1e1;
        }
        .radial-in:hover {
            background-color: #2098d1;
            color: #fff;
        }
        .radial-in:hover::after {
            background-color: #e1e1e1;
            transform: scale(0);
            z-index: 1;
        }

        /* 按钮8 shutter-out-horizontal */
        .shutter-out-horizontal::after {
            transform: scaleX(0);
        }
        .shutter-out-horizontal:hover {
            color: #fff;
            background-color: transparent;
        }
        .shutter-out-horizontal:hover::after {
            transform: scale(1);
        }
        /* 按钮9 shutter-in-horizontal */

        .shutter-in-horizontal::after {
            content: "";
            background-color: #e1e1e1;
            transform: scaleX(1);
            color: #000;
            text-align: center;
            line-height: 2.5;
        }
        .shutter-in-horizontal:hover{
            background-color: #2098d1;
            color: #fff;
        }
        .shutter-in-horizontal:hover::after {
            content: "";
            transform: scaleX(0);
            z-index: 1;
        }

        /* 按钮10 shutter-out-vertical */

        .shutter-out-vertical::after{
            transform: scaleY(0);
        }
        .shutter-out-vertical:hover::after {
            transform: scaleY(1);
        }
        .shutter-out-vertical:hover {
            background-color: transparent;
            color: #fff;
        }

        /* 按钮11 shutter-in-vertical */
        .shutter-in-vertical::after {
            background-color: #e1e1e1;
            transform: scaleY(1);
        }
        .shutter-in-vertical:hover::after{
            z-index: 1;
            transform: scaleY(0);
        }
        .shutter-in-vertical:hover{
            background-color: #2098d1;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="btn fade">
        fade
    </div>
    <div class="btn sweep-to-right">
        sweep-to-right
    </div>
    <div class="btn sweep-to-left">
        sweep-to-left
    </div>
    <div class="btn sweep-to-bottom">
        sweep-to-bottom
    </div>
    <div class="btn sweep-to-top">
        sweep-to-top
    </div>
    <div class="btn radial-out">
        radial-out
    </div>
    <div class="btn radial-in">
        radial-in
    </div>
    <div class="btn shutter-out-horizontal">
        Shutter-out-horizontal
    </div>
    <div class="btn shutter-in-horizontal">
        Shutter-in-horizontal
    </div>
    <div class="btn shutter-out-vertical">
        shutter-out-vertical
    </div>
    <div class="btn shutter-in-vertical">
        shutter-in-vertical
    </div>

</body>
</html>